<template>
    <div class="flow-menu" ref="tool">
        <div v-for="menu  in  menuList" :key="menu.id" class="menuList">
            <span class="ef-node-pmenu" >{{menu.templateType}}</span>
            <ul  class="ef-node-menu-ul">
                <draggable @end="end" @start="move" v-model="menu.tripNodeTemplateList" :options="draggableOptions" class="draggableOptions">
                    <li v-for="subMenu in menu.tripNodeTemplateList" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.id">
                        <i class="iconfont" :class="subMenu.ico" style="font-size:34px;"></i>
                        <p>{{subMenu.templateName}}</p>
                    </li>
                </draggable>
            </ul>
        </div>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'

    var mousePosition = {
        left: -1,
        top: -1
    }

    export default {
        data() {
            return {
                activeNames: '1',
                draggableOptions: {
                    preventOnFilter: false,
                    sort: false,
                    disabled: false,
                    ghostClass: 'tt',
                    forceFallback: true,
                },
                menuList: [],            // 菜单数据
                nodeMenu: {},            // 当前节点
            }
        },
        components: {
            draggable
        },
        mounted() {
            /**
             * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
             * @param event
             */
            if (this.isFirefox()) {
                document.body.ondrop = function (event) {
                    // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
                    mousePosition.left = event.layerX
                    mousePosition.top = event.clientY - 50
                    event.preventDefault();
                    event.stopPropagation();
                }
            }

            // 请求所有标签数据
            this.getMenuList();
        },

        methods: {

            // 获取所有标签列表
            getMenuList() {
                let _this = this;
               _this.utils.request.getLabelList({},function(res) {
                    if(res.data && res.data.length > 0) {
                        res.data.forEach((item) => {
                            item.open = true;
                        })
                        _this.menuList = res.data;
                    }
                }
            )},

            // 根据类型获取左侧菜单对象
            getMenuByType(type) {
                for (let i = 0; i < this.menuList.length; i++) {
                    let children = this.menuList[i].tripNodeTemplateList;
                    for (let j = 0; j < children.length; j++) {
                        if (children[j].id === type) {
                            return children[j]
                        }
                    }
                    
                }
            },
            // 拖拽开始时触发
            move(evt) {
                var type = evt.item.attributes.type.nodeValue;
                this.nodeMenu = this.getMenuByType(type)
            },
            // 拖拽结束时触发
            end(evt, e) {
                this.$emit('addNode', evt, this.nodeMenu, mousePosition)
            },
            // 是否是火狐浏览器
            isFirefox() {
                var userAgent = navigator.userAgent
                if (userAgent.indexOf("Firefox") > -1) {
                    return true
                }
                return false
            }
        }
    }
</script>
<style scoped lang="scss">
.flow-menu{
    .menuList{
    }
    /deep/ .ef-node-pmenu{
        width: auto;
        color: #fff;
        background-color: #1F2F4A;
        height: 42px;
        line-height: 42px;
        margin-bottom: 22px;
    }
    /deep/ .ef-node-menu-ul{
        padding:0 20px;
        .draggableOptions{
            display: flex;
            justify-content: flex-start;
            flex-shrink: 0;
            flex-wrap: wrap;
            border-bottom:1px solid #ECECEC;
            .ef-node-menu-li{
                width: 86px;
                height: 86px;
                margin-bottom:20px;
                border:0;
                color:#333;
                border-radius:2px;
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: center;
                flex-shrink: 0;
                flex-wrap: wrap;
                p{
                    width: 100%;
                    margin-top: 6px;
                    font-size: 12px;
                }
                &:hover{
                    border:0;
                    padding: 0;
                    background: #222F48;
                    color: #fff;
                }
            }
            &:last-child {
                border-bottom: 0 none;
            }
        } 
    } 
}

</style>